<template>
  <div class="floor">
    <h3 :class="floorName | orderNameFormate">{{floorName}}</h3>
    <router-link
      v-for="item of floors"
      :key="item.goodsId"
      v-lazy="item.image"
      :to="{name:'goodsDetail',params:{id:item.goodsId}}"
      tag="img"
    ></router-link>
  </div>
</template>

<script>
const FLOORNAME = {
  休闲食品: "colorBlue",
  新鲜水果: "colorOrange",
  营养奶品: "colorGreen"
};
export default {
  props: ["floors", "floorName"],
  filters: {
    orderNameFormate(value) {
      return FLOORNAME[value];
    }
  },
  data() {
    return {};
  }
};
</script>
<style scoped>
.floor {
  overflow: hidden;
}
.floor h3 {
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: black;
}
.floor img:nth-of-type(1) {
  width: 186.5px;
  height: 205px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.floor img:nth-of-type(4) {
  width: 186.5px;
  border-right: 1px solid #ccc;
}

.floor img {
  float: left;
  width: 187.5px;
  height: 102.5px;
  border-bottom: 1px solid #ccc;
}
h3.colorBlue {
  color: blueviolet;
}
h3.colorOrange {
  color: orange;
}
h3.colorGreen {
  color: green;
}
</style>